import { Button, Modal, message } from "antd";
import { useState } from "react";
import { Form, Input, Select, TreeSelect } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import menus from "@/router/menus";
import getTereData from "../utils/getMenusTree";
import { changeEditAdmin } from "../store/modules/admin";
import {
  // getAdminlist,
  // getAdminDetail,
  addAdmin,
  // deleteAdmin,
  // editAdmin,
} from "@/api/admin";
const ModalAddAdmin = (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const dispatch = useDispatch();
  const showModal = () => {
    setIsModalOpen(true);
  };
  //添加管理员时的回调
  const onAdd = () => {
    console.log("Modal okok--->", adminInfo);
    addAdmin(adminInfo).then((res) => {
      console.log(res);
      if (res.data.code === "200") {
        message.warning("添加管理员成功");
      } else if (res.data.code === "10004") {
        message.error("该管理员已存在");
      } else {
        message.error(res.data.message);
      }
      setIsModalOpen(false);
      clearInfo();
      props.update();
    });
  };
  const clearInfo = () => {
    dispatch(
      changeEditAdmin({
        adminname: "",
        password: "",
        role: "1",
        checkedKeys: [],
      })
    );
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const adminInfo = useSelector((state) => state.admin.editAdmin);

  const treeData = getTereData(menus);

  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加管理员
      </Button>
      <Modal open={isModalOpen} onCancel={handleCancel} footer={null}>
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
          onValuesChange={() => {
            console.log("values change");
          }}
          size="default"
        >
          <Form.Item label="用户名">
            <Input
              value={adminInfo.adminname}
              onChange={(e) => {
                dispatch(
                  changeEditAdmin({ ...adminInfo, adminname: e.target.value })
                );
              }}
              allowClear
              placeholder="请输入用户名"
              prefix={<UserOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item label="密码">
            <Input
              value={adminInfo.password}
              onChange={(e) => {
                console.log("modaladd password--->", e.target.value);
                dispatch(
                  changeEditAdmin({ ...adminInfo, password: e.target.value })
                );
              }}
              allowClear
              placeholder="请输入密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item label="角色">
            <Select
              value={adminInfo.role}
              style={{
                width: 120,
              }}
              onSelect={(value) => {
                console.log(value);
                dispatch(changeEditAdmin({ ...adminInfo, role: value }));
              }}
              options={[
                {
                  value: "1",
                  label: "管理员",
                },
                {
                  value: "2",
                  label: "超级管理员",
                },
              ]}
            />
          </Form.Item>
          <Form.Item label="权限">
            <TreeSelect
              value={adminInfo.checkedKeys}
              onSearch={(value) => {
                console.log("onSearch--->", value);
              }}
              showSearch
              style={{
                width: "100%",
              }}
              dropdownStyle={{
                maxHeight: 400,
                overflow: "auto",
              }}
              placeholder="请选择权限"
              allowClear
              multiple
              treeDefaultExpandAll
              onChange={(value) => {
                // const newCheckedKeys = value.forEach((item, index) => {});
                dispatch(changeEditAdmin({ ...adminInfo, checkedKeys: value }));
              }}
              treeData={treeData}
              treeCheckable
            />
          </Form.Item>
          <Button onClick={onAdd}>确定</Button>
        </Form>
      </Modal>
    </>
  );
};
export default ModalAddAdmin;
